<template>
	<view>
		<view v-if="cur_page == pay_page">
			<!-- 搜索 -->
			<view class="header">
				<view class="search">
					<view class="image-box">
						<image src="../../../../static/icon/job.png" mode=""></image>
					</view>
					<input class="search-input" type="text" :value="p_searchName" placeholder="请输入姓名" confirm-type="search" @confirm="pNameSearch"/>
				</view>
			</view>
			
			<!-- 列表 -->
			<view class="list" >
				<view class="list-item" v-for="(item, index) in payCodeList" :key="index">
					<view class="card-top">
						<image :src="item.href" mode="aspectFill"></image>
						<view class="card-top-user">
							<view class="card-top-user-info">
								<view class="name">{{item.name}}</view>
								<view class="identity">{{item.type_text}}</view>
							</view>
							<view>证件号码：{{item.card_number}}</view>
							<view>服务是否到期：
								<text v-if="item.expire == 1" style="color: red;">已到期</text>
								<text v-else style="color: #2A9F93;">未到期</text>
							</view>
							<view>服务到期时间：<text style="font-size: 24rpx; color: #2A9F93;">{{item.expire_time}}</text></view>
						</view>
					</view>
				</view>
				<view class="footer" v-show="p_showMore">
					暂无更多数据
				</view>
			</view>
		</view>
		<view  v-if="cur_page == auth_page">
			<!-- 搜索 -->
			<view class="header">
				<view class="search">
					<view class="image-box">
						<image src="../../../../static/icon/job.png" mode=""></image>
					</view>
					<input class="search-input" type="text" :value="a_searchName" placeholder="请输入姓名" confirm-type="search" @confirm="aNameSearch"/>
				</view>
			</view>
			<view class="list">
				<view class="list-item" v-for="(item, index) in authList" :key="index">
					<view class="card-top">
						<image :src="item.snapshot.href" mode="aspectFill"></image>
						<view class="card-top-user">
							<view class="card-top-user-info">
								<view class="name">{{item.snapshot.name}}</view>
								<view class="identity">{{item.typeString}}</view>
							</view>
							<view>证件号码：{{item.snapshot.card_number}}</view>
							<view>所在房间号：{{item.room}}</view>
							<view>是否授权：
								<text v-if="item.is_authorization == 1" style="color: #2A9F93;">已授权</text>
								<text v-else  style="color: red;">未授权</text>
							</view>
						</view>
					</view>
				</view>
				<view class="footer" v-show="a_showMore">
					暂无更多数据
				</view>
		</view>
		
		</view>
	</view>
</template>

<script>
	import USER from '@/api/user/index.js'

	let app = getApp();

	export default {
		data() {
			return {
				address_id: '',
				// 缴费列表
				payCodeList: [],
				p_showMore: false,
				p_page: 1,
				p_searchName: '',
				
				// 授权列表
				authList: [],
				a_showMore: false,
				a_page: 1,
				a_searchName: '',
				
				// 页面切换
				cur_page: '',
				pay_page: '',
				auth_page: ''
			}
		},
		onLoad(opt) {
			var self = this;
			switch (opt.curPage) {
				case "pagePay":
					uni.setNavigationBarTitle({
						title: '缴费情况',
						success() {
							self.cur_page = "pagePay";
							self.pay_page = "pagePay";
							self.getpayCodeList();
						}
					});
					break;
				case "pageAuth":
					uni.setNavigationBarTitle({
						title: '授权列表',
						success() {
							self.cur_page = "pageAuth";
							self.auth_page = "pageAuth";
							self.getAuthList();
						}
					});
					break;
			}
		},
		methods: {
			// 缴费情况
			getpayCodeList() {
				var self = this;
				uni.showLoading({
					title: '获取数据中',
					mask: true
				})
				self.address_id = app.globalData.intoRentAddressId; // 地址id
				USER.payCost(self.p_page, 10, self.address_id, self.p_searchName)
					.then(res => {
						uni.hideLoading();
						if (res.data.data.length == 0) {
							self.p_showMore = true;
						}
						self.payCodeList = self.payCodeList.concat(res.data.data);
					});
			},
			
			pNameSearch(e) {
				var self = this;
				self.p_page = 1;
				self.payCodeList = [];
				self.p_searchName = e.detail.value;
				self.getpayCodeList();
			},
			
			// 授权列表
			getAuthList() {
				var self = this;
				uni.showLoading({
					title: '获取数据中',
					mask: true
				})
				self.address_id = app.globalData.intoRentAddressId; // 地址id
				USER.authList(self.a_page, 10, self.address_id, self.a_searchName)
					.then(res => {
						uni.hideLoading();
						if (res.data.data.length == 0) {
							self.a_showMore = true;
						}
						self.authList = self.authList.concat(res.data.data);
					});
			},
			
			aNameSearch(e) {
				var self = this;
				self.a_page = 1;
				self.authList = [];
				self.a_searchName = e.detail.value;
				self.getAuthList();
			},
			
			// 下拉刷新
			onReachBottom() {
				var self = this;
				console.log(self.cur_page)
				if(self.cur_page == "pagePay") {
					console.log("pay_page")
					self.p_page += 1;
					if (!self.p_showMore) {
						self.getpayCodeList();
					}
				} else if(self.cur_page == "pageAuth") {
					console.log("auth_page")
					self.a_page += 1;
					if (!self.a_showMore) {
						self.getAuthList();
					}
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.header {
		padding: 30rpx;
		border-bottom: 2rpx solid #ccc;


		.search {
			display: flex;
			align-items: center;
			height: 70rpx;
			border: 1rpx solid #ccc;
			border-radius: 20rpx;
			box-shadow: 0px 5rpx 20rpx #ccc;

			.image-box {
				display: flex;
				align-items: center;
				justify-content: center;
				height: 30rpx;
				padding: 20rpx;
				border-right: 1rpx solid #ccc;

				image {
					width: 50rpx;
					height: 50rpx;
				}
			}

			.search-input {
				width: 600rpx;
				font-size: 28rpx;
				padding-left: 10rpx;
			}
		}

	}

	.list {
		margin: 30rpx;
		padding: 10rpx 0;
		border-radius: 20rpx;
		box-shadow: 0px 5rpx 20rpx #ccc;
		font-size: 30rpx;

		.list-item {
			display: flex;
			flex-direction: column;
			padding: 20rpx 20rpx;
			border-bottom: 2rpx solid #ccc;

			.card-top {
				display: flex;

				image {
					width: 180rpx;
					height: 180rpx;
					margin-right: 20rpx;
				}

				.card-top-user {
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					width: 500rpx;
					height: 200rpx;

					.card-top-user-info {
						display: flex;

						.name {
							width: 150rpx;
							font-weight: 800;
							text-overflow: ellipsis;
							white-space: nowrap;
							overflow: hidden;
						}
					}
				}
			}

			.card-bottom {
				display: flex;
				padding: 10rpx;
			}
		}
	}
	
	.footer {
		display: flex;
		justify-content: center;
		align-items: center;
	
		height: 100rpx;
		font-size: 28rpx;
		color: #999;
	}
</style>
